<template>
	<view class="container">
		<!-- 帖子内容区域 -->
		<view class="post-container">
			<!-- 用户信息区域 -->
			<view class="post-header">
				<view style="display: flex; align-items: center;">
					<van-image v-if="currentDetail.niMingTouimg" :src="currentDetail.niMingTouimg" round
						style="width: 80rpx; height: 80rpx; margin-right: 16rpx;" />
					<van-image v-else :src="currentDetail.avatarText" round
						style="width: 80rpx; height: 80rpx; margin-right: 16rpx;" />
					<view class="user-details">
						<view class="username-row">
							<text class="username">{{ currentDetail.niMingName || currentDetail.username }}</text>
						</view>
					</view>
				</view>
				<!-- 根据是否为作者显示不同按钮 -->
				<view v-if="isCurrentUser" class="delete-btn" @click="deletePost1">删除</view>
				<view v-else class="report-btn" @click="handleReport">举报</view>
			</view>

			<!-- 内容区域 -->
			<view class="post-content-area">
				<view class="post-content">
					{{ currentDetail.content || '有拼车去邯郸的吗？价格可谈！' }}
				</view>

				<!-- 图片区域 -->
				<view v-if="currentDetail.images" class="post-images">
					<van-grid column-num="3" :border="false">
						<van-grid-item use-slot v-for="(imgUrl, imgIndex) in currentDetail.images.split(',')"
							:key="imgIndex">
							<van-image width="180rpx" height="180rpx" radius="10px" :src="imgUrl" />
						</van-grid-item>
					</van-grid>
				</view>

				<!-- 标签区域 -->
				<view class="post-tags" style="display: flex; gap: 10rpx; margin-top: 16rpx;">
					<view class="tag-item" v-for="(tag, index) in currentDetail.tags || []" :key="index">
						<image src="https://paole.hebeixiaoyu.cn/run/profile/upload/biaoqian.png" mode="aspectFit"
							style="width: 24rpx; height: 24rpx; margin-right: 5rpx;" />
						<text style="font-size: 22rpx; color: #666;">{{ tag }}</text>
					</view>
				</view>
			</view>

			<!-- 互动区域 -->
			<view class="post-footer">
				<view class="interaction"
					style="display: flex; align-items: center; gap: 40rpx;justify-content: flex-end;">
					<view class="like-btn" @click.stop="onGiveLike(currentDetail.id)"
						style="display: flex; align-items: center; gap: 5rpx;">
						<image
							:src="currentDetail.likestatus === 1 ? 'https://paole.hebeixiaoyu.cn/run/profile/upload/dianzanhongse.png' : 'https://paole.hebeixiaoyu.cn/run/profile/upload/dianzanheise.png'"
							mode="aspectFit" style="width: 36rpx; height: 36rpx;" />
						<text style="font-size: 24rpx; color: #666;">{{ currentDetail.likeCount || 0 }}</text>
					</view>
					<view class="comment-btn" style="display: flex; align-items: center; gap: 5rpx;">
						<image src="https://paole.hebeixiaoyu.cn/run/profile/upload/pinglunheise.png" mode="aspectFit"
							style="width: 36rpx; height: 36rpx;" />
						<text style="font-size: 24rpx; color: #666;">{{ postDetail.commentCount || 0 }}</text>
					</view>
				</view>
			</view>

			<!-- 提示区域 -->
			<view class="notice-section">
				<view class="notice-title">【发言提示：文明发声，责任同行，感谢配合，祝大家交流愉快】</view>
				<view style="display: flex; justify-content: space-between;">
					<view class="notice-footer">
						<view>严禁发布以下内容：</view>
						<view>· 代课/代考/代写等学术失信行为</view>
						<view>· 人身攻击、网络暴力言论</view>
						<view>· 未经授权的隐私信息</view>
						<view>· 低俗色情、擦边内容及敏感话题</view>
					</view>
					<view class="notice-footer">
						<view>违规贴文视情况删除、账号封禁或上报学校处理</view>
						<view>网络并非法外之地，请谨记学生身份</view>
						<view>共同维护理性友善的交流空间</view>
						<view>若发现违规内容，欢迎通过站内举报通道反馈</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 评论区 - 当允许评论时显示 -->
		<view class="comment-section" v-if="!currentDetail.isCommentDisabled">
			<view class="comment-header">
				<text>评论({{ postDetail.commentCount || 0 }})</text>
			</view>

			<!-- 评论区 -->
			<view class="comment-list" v-for="(pinglun, index) in postDetail.pingLunVos" :key="index">
				<view class="yiTiaoPingLun">
					<!-- 第一条评论 -->
					<view class="comment-item">
						<van-image width="60rpx" height="60rpx" :src="pinglun.niMingImg || pinglun.userImg" round />
						<view class="comment-content">
							<view class="comment-meta">
								<text class="comment-username">{{pinglun.niMingName || pinglun.userName}}</text>
								<text v-if="pinglun.niMingName" class="anonymous-tag">神秘同学</text>
							</view>
							<view class="comment-text">{{pinglun.pingLunNeiRong}}</view>

							<!-- 仅楼主可见内容显示 -->
							<view v-if="pinglun.ownerOnlyContent && isCurrentUser" class="author-only-content">
								<text class="author-only-label">仅楼主可见:</text>
								<text>{{pinglun.ownerOnlyContent}}</text>
							</view>

							<view class="comment-actions">
								<text class="comment-time">{{ formatTime(pinglun.createTime || new Date()) }}</text>
								<text class="reply-btn"
									@click="replyComment(pinglun.id, pinglun.niMingName?pinglun.niMingName:pinglun.userName)">回复</text>
							</view>
						</view>
					</view>
					<!-- 回复评论 -->
					<view class="comment-item reply-comment" v-for="(louceng, index) in pinglun.pingLunVos"
						:key="index">
						<van-image width="60rpx" height="60rpx" :src="louceng.niMingImg || louceng.userImg" round />
						<view class="comment-content">
							<view class="comment-meta">
								<text class="comment-username">{{louceng.niMingName || louceng.userName}}</text>
								<text v-if="louceng.niMingName" class="anonymous-tag">神秘同学</text>
							</view>
							<view class="comment-text">
								<view class="comment-text">{{louceng.pingLunNeiRong}}</view>
							</view>

							<!-- 仅楼主可见内容显示 -->
							<view v-if="louceng.ownerOnlyContent && isCurrentUser" class="author-only-content">
								<text class="author-only-label">仅楼主可见:</text>
								<text>{{louceng.ownerOnlyContent}}</text>
							</view>

							<view class="comment-actions">
								<text class="comment-time">{{ formatTime(louceng.createTime || new Date()) }}</text>
								<text class="reply-btn"
									@click="replyComment(pinglun.id, louceng.niMingName?louceng.niMingName:louceng.userName)">回复</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="(postDetail.pingLunVos || []).length === 0" class="no-comment">
				<text>暂无评论，快来抢沙发吧</text>
			</view>

			<view v-if="hasMoreComments" class="load-more-comments" @click="loadMoreComments">
				<text>加载更多评论</text>
			</view>

			<view v-else-if="(postDetail.pingLunVos || []).length > 0" class="no-more-comments">
				<text>没有更多评论了</text>
			</view>
		</view>

		<!-- 禁止评论提示 - 当禁止评论时显示 -->
		<view class="comment-disabled-tip" v-if="currentDetail.isCommentDisabled">
			<text>作者禁止评论</text>
		</view>

		<!-- 底部输入框 - 当允许评论时显示 -->
		<view class="input-container" v-if="!currentDetail.isCommentDisabled">
			<view class="author-only-input-area">
				<view class="author-only-label">全部人可见:</view>
				<input v-model="commentContent" class="author-only-input" placeholder="说点什么吧..." />
			</view>

			<!-- 仅楼主可见输入框 -->
			<view class="author-only-input-area">
				<view class="author-only-label">仅楼主可见:</view>
				<input v-model="authorOnlyContent" class="author-only-input" placeholder="仅楼主可见的内容" />
				<button class="send-btn" @click="showAnonymousConfirm">发送</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		pageScrollTo
	} from '@dcloudio/uni-app';
	import dayjs from 'dayjs';
	import relativeTime from 'dayjs/plugin/relativeTime';
	import {
		getDetail,
		commentPost,
		likePost,
		addTieZiLiuLan,
		getSchoolIdBy,
		deletePost // 引入删除帖子API
	} from '@/api/xiaoquan.js';
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app';


	onUnload(() => {
		// 使用 uni.switchTab 方法返回到首页
		// 假设首页的路径是 '/pages/index/index'，请根据实际情况修改
		uni.switchTab({
			url: '/pages/circle/circle'
		});

	});



	const itemDetail = ref({});
	const currentUser = ref({}); // 当前用户信息，用于判断是否为楼主
	const isAnonymous = ref(false); // 是否匿名评论

	dayjs.extend(relativeTime);

	const currentId = ref(null);
	const currentDetail = ref({
		user: {},
		remake: '',
		images: '',
		tags: [],
		likeCount: 0,
		likestatus: 0,
		isCommentDisabled: 0, // 0允许评论，1禁止评论
		userId: null // 帖子作者ID
	});
	const postDetail = ref({
		pingLunVos: [],
		commentCount: 0
	});
	const commentContent = ref('');
	const authorOnlyContent = ref(''); // 仅楼主可见的内容
	const parentCommentId = ref(null); // 父评论ID，用于回复
	const schoolId = ref(); // 学校ID
	const currentPage = ref(1);
	const pageSize = ref(10);
	const hasMoreComments = ref(true);
	const isLoading = ref(false);

	// 判断是否为当前帖子的作者
	const isCurrentUser = computed(() => {
		const loginData = uni.getStorageSync('login_data');
		return loginData?.uid === currentDetail.value.userId;
	});

	// 修改后的时间格式化函数
	const formatTime = (time) => {
		let inputTime;
		if (typeof time === 'number') {
			inputTime = new Date(time);
		} else if (typeof time === 'string') {
			inputTime = new Date(time);
			if (isNaN(inputTime.getTime())) {
				inputTime = new Date(Date.parse(time.replace(/-/g, '/')));
			}
		} else if (time instanceof Date) {
			inputTime = time;
		} else {
			inputTime = new Date();
		}

		const now = new Date();
		const timeDiff = now - inputTime;
		const minutesDiff = Math.floor(timeDiff / (1000 * 60));
		const hoursDiff = Math.floor(timeDiff / (1000 * 60 * 60));
		const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

		if (minutesDiff < 60 && minutesDiff >= 0) {
			if (minutesDiff == 0) {
				return "刚刚";
			}
			return `${minutesDiff}分钟前`;
		} else if (hoursDiff < 24 && hoursDiff > 0) {
			return `${hoursDiff}小时前`;
		} else {
			const year = inputTime.getFullYear();
			const month = String(inputTime.getMonth() + 1).padStart(2, '0');
			const day = String(inputTime.getDate()).padStart(2, '0');
			const hour = String(inputTime.getHours()).padStart(2, '0');
			const minute = String(inputTime.getMinutes()).padStart(2, '0');
			const second = String(inputTime.getSeconds()).padStart(2, '0');
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
		}
	};

	// 举报处理
	const handleReport = () => {
		// 存储帖子ID
		uni.setStorageSync("tieZiId", currentId.value);
		uni.navigateTo({
			url: `/package/pages/jubao/jubao`
		});
	};

	// 删除帖子
	const deletePost1 = () => {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这条帖子吗？删除后将无法恢复',
			confirmText: '确认删除',
			cancelText: '取消',
			success: async (res) => {
				if (res.confirm) {
					uni.showLoading({
						title: '删除中...'
					});
					try {
						console.log("==========", currentId.value)
						const response = await deletePost(currentId.value);
						uni.hideLoading();

						if (response.code === 200) {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
							// 删除成功后返回上一页
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						} else {
							uni.showToast({
								title: response.message || '删除失败',
								icon: 'none'
							});
						}
					} catch (error) {
						console.error('删除帖子失败', error);
						uni.showToast({
							title: '删除失败，请稍后重试',
							icon: 'none'
						});
					}
				}
			}
		});
	};

	const onGiveLike = async (postId) => {
		if (!postId) return;
		const post = currentDetail.value;
		if (!post) return;

		const originalStatus = post.likestatus;
		post.likestatus = post.likestatus === 1 ? 0 : 1;
		post.likeCount = post.likestatus === 1 ?
			(parseInt(post.likeCount) + 1).toString() :
			(parseInt(post.likeCount) - 1).toString();

		uni.showLoading({
			title: '操作中...'
		});

		try {
			const response = await likePost(postId, post.likestatus);
			if (response.code !== 200) {
				throw new Error(response.message || '操作失败');
			}

			uni.showToast({
				title: post.likestatus === 1 ? '点赞成功' : '取消点赞',
				icon: 'success'
			});
		} catch (error) {
			console.error('点赞请求失败', error);
			post.likestatus = originalStatus;
			post.likeCount = originalStatus === 1 ?
				(parseInt(post.likeCount) + 1).toString() :
				(parseInt(post.likeCount) - 1).toString();
			uni.showToast({
				title: error.message || '操作失败，请稍后重试',
				icon: 'none'
			});
		} finally {
			uni.hideLoading();
		}
	};

	// 回复评论
	const replyComment = (commentId, replyTo = '') => {
		parentCommentId.value = commentId;
		commentContent.value = replyTo ? `@${replyTo} ` : '';
		authorOnlyContent.value = '';

		setTimeout(() => {
			uni.createSelectorQuery().select('.input-container').boundingClientRect(rect => {
				if (rect) {
					uni.pageScrollTo({
						scrollTop: document.body.scrollHeight - rect.height - 50,
						duration: 300
					});
				}
			}).exec();
		}, 100);
	}

	// 显示匿名评论确认框
	const showAnonymousConfirm = async () => {

		// 首先判断是否进行了登录

		const data = uni.getStorageSync("login_data")
		console.log(data, 234)
		if (!data) {
			// 显示提示文字
			wx.showToast({
				title: '请先登录',
				icon: 'none',
				duration: 1000 // 提示停留2秒
			});

			//延迟2秒后跳转到登录页
			setTimeout(() => {
				wx.switchTab({
					url: '/pages/mine/mine'
				});
			}, 1000);
		}

		let res = await getSchoolIdBy();
		const school = res.data;
		uni.setStorageSync('school_id', school)
		console.log(res, 333333333)
		if (!school) {

			wx.showToast({
				title: '请先选择学校',
				icon: 'none',
				duration: 1000 // 提示停留2秒
			});

			// 延迟2秒后跳转到登录页
			setTimeout(() => {
				uni.navigateTo({
					url: `/package/pages/selectSchool/selectSchool`
				});
			}, 1000);

			return;
		}



		if (!commentContent.value.trim()) {
			uni.showToast({
				title: '评论内容不能为空',
				icon: 'none'
			});
			return;
		}

		uni.showModal({
			title: '发布评论',
			content: '是否使用第二身份发布此评论？\n\n发布不当言论，自己承担全部责任',
			confirmText: '使用第二身份发布',
			cancelText: '实名发布',
			success: (res) => {
				if (res.confirm) {
					isAnonymous.value = true;
					sendComment();
				} else {
					isAnonymous.value = false;
					sendComment();
				}
			}
		});
	}

	// 发送评论
	const sendComment = () => {
		if (!commentContent.value.trim()) {
			uni.showToast({
				title: '评论内容不能为空',
				icon: 'none'
			});
			return;
		}

		const commentData = {
			postId: currentId.value,
			parentCommentId: parentCommentId.value,
			content: commentContent.value.trim(),
			schoolId: schoolId.value,
			contentForAuthor: authorOnlyContent.value.trim(),
			isAnonymous: isAnonymous.value
		};

		console.log(commentData, "111111111111111111111=========================")
		commentPost(commentData).then(res => {
			if (res.code === 200) {
				commentContent.value = '';
				authorOnlyContent.value = '';
				parentCommentId.value = null;
				uni.showToast({
					title: '评论成功',
					icon: 'success'
				});
				currentPage.value = 1;
				fetchPostDetail(currentId.value);
			} else {
				uni.showToast({
					title: res.message || '评论失败',
					icon: 'none'
				});
			}
		}).catch(err => {
			console.error('评论失败', err);
			uni.showToast({
				title: '评论失败，请稍后重试',
				icon: 'none'
			});
		});
	}

	// 加载更多评论
	const loadMoreComments = () => {
		if (!hasMoreComments.value || isLoading.value) return;
		currentPage.value++;
		fetchPostDetail(currentId.value);
	}

	// 获取帖子详情
	const fetchPostDetail = async (id) => {
		if (!id) return;
		isLoading.value = true;
		try {
			const response = await getDetail(id);
			console.log(response.code);
			if (response.code == 500) {
				// 返回上个页面，没有查到东西
				// 显示提示文字
				wx.showToast({
					title: '帖子不可见',
					icon: 'none',
					duration: 1000 // 提示停留2秒
				});

				// 延迟2秒后跳转到登录页
				setTimeout(() => {
					uni.navigateBack({
						delta: 1,
						success: () => {
							console.log('成功返回上一页');
						},
						fail: (err) => {
							console.error('返回上一页失败:', err);
						}
					});
				}, 1000);
			}
			if (response && response.data) {

				currentDetail.value = response.data;
				postDetail.value = response.data;
				currentUser.value.id = response.data.userId;
				currentDetail.value.userId = response.data.userId; // 存储作者ID

				if (currentDetail.value.createtime) {
					currentDetail.value.updatetime_text = dayjs(currentDetail.value.createtime).fromNow();
				}

				const comments = response.data.pingLunVos || [];
				hasMoreComments.value = comments.length >= pageSize.value;
			}
		} catch (error) {
			console.error('获取帖子详情失败', error);
			uni.showToast({
				title: '获取详情失败，请稍后重试',
				icon: 'none'
			});
		} finally {
			isLoading.value = false;
		}
	}

	// 页面加载时触发
	onLoad((options) => {
		if (options.id) {
			currentId.value = options.id;
			console.log('接收到的帖子ID:', currentId.value);
			fetchPostDetail(currentId.value);
		} else {
			uni.showToast({
				title: '参数错误，无法获取帖子',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	});

	// 页面显示时更新数据
	onShow(() => {
		schoolId.value = uni.getStorageSync('school_id') || '5';

		const cachedItem = uni.getStorageSync("itemDetail");
		if (cachedItem && cachedItem.id) {
			currentId.value = cachedItem.id;
			fetchPostDetail(currentId.value);
			addTieZiLiuLan(currentId.value);
		} else if (currentId.value) {
			fetchPostDetail(currentId.value);
			addTieZiLiuLan(currentId.value);
		}
	});
</script>

<style scoped>
	/* 样式保持不变 */
	.container {
		background-color: #f5f7fa;
		min-height: 100vh;
		box-sizing: border-box;
		position: relative;
		padding-bottom: 130px;
	}

	.notice-title {
		font-size: 19rpx;
		font-weight: 800;
		text-align: center;
		margin-bottom: 9rpx;
		line-height: 1.6;
	}

	.notice-footer {
		margin-top: 20rpx;
		font-size: 16rpx;
		line-height: 1.8;
	}

	.notice-footer view {
		margin-top: 5rpx;
	}

	.notice-section {
		padding: 30rpx;
		border-radius: 16rpx;
		border: 1rpx solid #eee;
	}

	.post-container {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.post-header {
		padding-bottom: 25rpx;
		position: relative;
		border-bottom: 1rpx solid #f0f0f0;
		margin-bottom: 30rpx;
	}

	.user-details {
		flex: 1;
	}

	.username-row {
		display: flex;
		flex-direction: column;
	}

	.username {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.time {
		font-size: 24rpx;
		color: #999;
		margin-top: 4rpx;
	}

	.report-btn,
	.delete-btn {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		font-size: 26rpx;
		z-index: 10;
	}

	.report-btn {
		color: #3c91ff;
	}

	.delete-btn {
		color: #ff4d4f;
	}

	.post-content-area {
		margin-bottom: 30rpx;
	}

	.post-content {
		font-size: 30rpx;
		line-height: 1.6;
		color: #333;
		margin-bottom: 20rpx;
	}

	.post-tags {
		flex-wrap: wrap;
	}

	.tag-item {
		display: flex;
		align-items: center;
		background-color: #f7f7f7;
		padding: 5px 10px;
		border-radius: 25px;
		font-size: 22rpx;
		color: #666;
	}

	.post-footer {
		padding: 20rpx 0;
		border-top: 1rpx solid #f0f0f0;
		margin-top: 20rpx;
	}

	.interaction {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.like-btn,
	.comment-btn {
		display: flex;
		align-items: center;
		gap: 5rpx;
		cursor: pointer;
		transition: transform 0.2s ease;
	}

	.like-btn:active,
	.comment-btn:active {
		transform: scale(0.95);
	}

	.notice-section {
		padding: 20rpx;
		border-radius: 12rpx;
		background-color: #f9f9f9;
		margin-top: 20rpx;
	}

	.notice-title {
		font-size: 26rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 15rpx;
		color: #333;
	}

	.comment-section {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin: 20rpx 0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.comment-header {
		font-size: 34rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		margin-bottom: 20rpx;
	}

	.comment-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.reply-comment {
		background-color: #f9f9f9;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-top: 10rpx;
		border-bottom: none;
		margin-left: 80rpx;
	}

	.comment-content {
		flex: 1;
		padding-left: 20rpx;
	}

	.comment-meta {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.comment-username {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.anonymous-tag {
		font-size: 22rpx;
		color: #ff6b6b;
		background-color: #fff8f8;
		padding: 2rpx 8rpx;
		border-radius: 4rpx;
		margin-left: 8rpx;
	}

	.comment-time {
		font-size: 24rpx;
		color: #999;
	}

	.comment-text {
		font-size: 28rpx;
		line-height: 1.5;
		color: #333;
		margin-bottom: 15rpx;
	}

	.reply-target {
		color: #3c91ff;
		font-weight: 500;
	}

	.comment-actions {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.reply-btn {
		font-size: 24rpx;
		color: #3c91ff;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		background-color: #f0f7ff;
	}

	.no-comment {
		padding: 30rpx 0;
		text-align: center;
		color: #999;
		font-size: 26rpx;
	}

	.load-more-comments,
	.no-more-comments {
		padding: 20rpx 0;
		text-align: center;
		color: #999;
		font-size: 26rpx;
		cursor: pointer;
	}

	.no-more-comments {
		cursor: default;
	}

	.comment-disabled-tip {
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		margin: 20rpx 0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		text-align: center;
		font-size: 30rpx;
		color: #999;
	}

	.input-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		background: #fff;
		padding: 20rpx 30rpx 30rpx 30rpx;
		border-top: 1rpx solid #eee;
		z-index: 100;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.comment-input-area {
		width: 100%;
		margin-bottom: 15rpx;
	}

	.comment-input {
		width: 100%;
		background: #f5f7fa;
		border-radius: 40rpx;
		padding: 15rpx 30rpx;
		font-size: 28rpx;
		margin-right: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

	.author-only-input-area {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.author-only-label {
		font-size: 20rpx;
		color: #999;
		width: 120rpx;
	}

	.author-only-input {
		flex: 1;
		background: #f5f7fa;
		border-radius: 40rpx;
		padding: 15rpx 30rpx;
		font-size: 28rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

	.send-btn {
		background: #3c91ff;
		color: white;
		border-radius: 40rpx;
		font-size: 28rpx;
		padding: 0 35rpx;
		height: 70rpx;
		line-height: 70rpx;
		border: none;
		align-self: flex-end;
	}

	.author-only-content {
		margin-top: 10rpx;
		padding: 10rpx;
		background-color: #f0f7ff;
		border-radius: 8rpx;
		font-size: 26rpx;
		color: #333;
	}

	.author-only-label {
		font-weight: bold;
		color: #3c91ff;
	}
</style>